<template>
    <!-- 你可以在对象中写多个字段来操作多个 class。此外，
    :class 指令也可以和一般的 class attribute 共存。举例来说，下面这样的状态： -->
    <div
      class="container"
      :class="{ 'active': isActive, 'text-danger': hasError }"
    >
      <p v-if="hasError">出错了!</p>
      <p v-else>一切良好!</p>
    </div>
    <button @click="toggleActive">点击</button>
    <button @click="toggleError">出错</button>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const isActive = ref(true);
  const hasError = ref(false);
  
  function toggleActive() {
    isActive.value = !isActive.value;
  }
  
  function toggleError() {
    hasError.value = !hasError.value;
  }
  </script>
  
  <style scoped>
  .container {
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  .active {
    background-color: rgb(125, 190, 218);
  }
  .text-danger {
    color: red;
  }
  </style>